<template>
  <div class="dashboard-container">
    <!-- 左侧导航栏 -->
    <Sidebar :user="user" />

    <!-- 主内容区 - 仅保留欢迎信息 -->
    <main class="main-content">
      <div class="welcome-container">
        <h1>欢迎回来, {{ user.name }}!</h1>
        <p class="subtitle">今天是 {{ currentDate }}</p>
      </div>
    </main>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import Sidebar from './Sidebar.vue'

export default defineComponent({
  name: 'DashboardView',
  components: {
    Sidebar
  },
  setup() {
    const user = ref({
      name: '张三',
      avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      role: '普通用户'
    })

    const currentDate = ref(new Date().toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      weekday: 'long'
    }))

    return {
      user,
      currentDate
    }
  }
})
</script>

<style scoped>
.dashboard-container {
  display: flex;
  min-height: 100vh;
  background-color: #ffffff;
}

.main-content {
  background-color: white;
  flex: 1;
  padding: 2rem;
  margin-left: 250px; /* 与侧边栏宽度一致 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.welcome-container {
  text-align: center;
  max-width: 600px;
}

.welcome-container h1 {
  font-size: 2.5rem;
  color: #303133;
  margin-bottom: 1rem;
}

.subtitle {
  color: #909399;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.welcome-image {
  margin-top: 2rem;
}

.welcome-image img {
  max-width: 100%;
  height: auto;
  opacity: 0.9;
}
</style>
